<template>
  <div class="time_box_list">
    <div class="time_box_item" v-for="(item,index) in test_data.test_list" :key="index">
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs} from "vue"

export default {
  name: "device_time_item",
  props: {
    len: {
      default: 25,
      type: Number
    },
    start: {
      default: 0,
      type: Number
    },
  },
  setup(props, context) {
    let {len, start} = toRefs(props)
    const test_data = reactive({
      test_list: []
    })
    const handle_time = (len, start = 0) => {
      for (let i = start; i < len; i++) {
        if (i < 10) {
          test_data.test_list.push(`0${i}`)
        } else {
          test_data.test_list.push(`${i}`)
        }

      }
    }
    handle_time(25, 0)
    return {
      test_data
    }
  },
}
</script>

<style scoped lang="scss">
.time_box_list{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #4d5aec;
  width: 100%;
  .time_box_item{
    height: 0.4rem;
    position: relative;
    bottom: 5px;
  }
}
</style>
